<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>泡泡侠首页----计价表</title>
  <link rel="stylesheet" href="css/app.css">
  <script type="text/javascript">
        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
         
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
  <base target="_blank"></head>
<body>
<section id="wrapper">
  
  
  
  <section id="jmb_body">
    <div class="jmb_body">
      
      
      
      
      <div class="tab tab_d">
        <div class="box boxa">
          <p>春夏装薄款 9.00元</p>
          <div class="count">
            <div class="l"><span>-</span></div>
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
          <p>春夏装薄款 9.00元</p>
          <div class="count">
            <div class="l"><span>-</span></div>
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
          <p>春夏装薄款 9.00元</p>
          <div class="count">
            <div class="l"><span>-</span></div>
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
          <p>春夏装薄款 9.00元</p>
          <div class="count">
            <div class="l"><span>-</span></div>
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
          <p>春夏装薄款 9.00元</p>
          <div class="count col_2">
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
          <p>春夏装薄款 9.00元</p>
          <div class="count col_2">
            <div class="m"><input type="text" value="0"></div>
            <div class="r"><span>+</span></div>
          </div>
        </div>
        <div class="box boxb">
          <div class="line">
            <span>不满20元收取10元配送费</span>
            <span class="jine">0.00</span>
          </div>
          <div class="line">
            <span>总金额</span>
            <span class="jine">10.00</span>
          </div>
            <div class="btn bottom">
             <button>确认</button>
            </div>

        </div>
      </div>




    </div>
  </section> 
  <section id="footer" pp_name="悬浮页脚">
    <div class="footer">
      <a href="#" class="l on"><span >洗衣</span></a>
      <a href="#" class="m "><span >订单</span></a>
      <a href="#" class="r "><span >个人</span></a>
    </div>
  </section>
</section>
<script src="js/jquery-1.10.1.min.js"></script>
<script>


 
 
$(document).ready(function(){

          var arr_navheight=[];
          arr_navheight[0]=$("#type9").offset().top+10*1;
          arr_navheight[1]=$("#type19").offset().top-arr_navheight[0];
          arr_navheight[2]=$("#type29").offset().top-arr_navheight[0];
          arr_navheight[3]=$("#type69").offset().top-arr_navheight[0];
          arr_navheight[4]=$("#type99").offset().top-arr_navheight[0];
         windowScroll();
        $("#jmb_nav li").click(function(){
          $(window).unbind("scroll");
            var _index=$(this).index();
            switch(_index)
            {
            case 0:
             HoverTreeScroll( $("#type9"));
              break;
            case 1:
              HoverTreeScroll($("#type19"));
              break;
              ;
            case 2:
              HoverTreeScroll($("#type29"));
              break;
              ;
            case 3:
              HoverTreeScroll($("#type69"));
              break;
              ;
            case 4:
              HoverTreeScroll($("#type99"));
              break;
              ;
            }
            navClassSet(_index);
        });
        function windowScroll(){
            $(window).scroll(function(event){
              var _h=$(window).scrollTop();
              console.log(_h,arr_navheight[1]);
               switch(true)
              {
              case 0<_h&&_h<arr_navheight[1]:
               navClassSet(0);
                break;
              case arr_navheight[1]<_h&&_h<arr_navheight[2]:
               navClassSet(1);
                break;           
               case arr_navheight[2]<_h&&_h<arr_navheight[3]:
                navClassSet(2);
                break;
                ;
              case arr_navheight[3]<_h&&_h<arr_navheight[4]:
                navClassSet(3);
                break;
              case _h>arr_navheight[4]:
                navClassSet(4);
                break;
                ;
          
              }
                //   console.log($(window).scrollTop(),
                // $("#type9").offset().top,
                // $("#type19").offset().top,
                // $("#type29").offset().top,
                // $("#type69").offset().top,
                // $("#type99").offset().top
                // );
          });
          }
          function navClassSet(i){
             $("#jmb_nav li").eq(i).siblings(".on").removeClass("on");
             $("#jmb_nav li").eq(i).addClass("on");
          }
         function HoverTreeScroll(el) {
          var scroll_offset = $(el).offset();
          var header_top=$("#type9").offset().top;
          var _newtop=scroll_offset.top-header_top*1;
          console.log(scroll_offset.top);
          $("body,html").stop().animate({ 
          scrollTop:_newtop
          },1000,function(){
            windowScroll();
          }); 
      }








});
</script>
</body>
</html>